<template>
  <div class="container">
    <div class="header">
      <van-icon
        @click="goback"
        class="header-left"
        name="arrow-left"
        size="30"
      />
      填写服务订单
    </div>
    <div class="banner">
      <schedule item="0" />
    </div>
    <van-cell class="cell">
      <template #title>
        <van-image
          height="25"
          width="25"
          :src="createInfo.service?.serviceImg"
        />
        {{ createInfo.service?.serviceName }}
      </template>
      <template #default> <div class="service-text">服务内容</div></template>
    </van-cell>

    <van-cell-group class="cell">
      <van-cell>
        <template #title>就诊医院 </template>
        <template #default
          ><div @click="showHospital = true">
            {{ from.hospital_name || "请选择就诊医院"
            }}<van-icon name="arrow" />
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template #title>就诊时间 </template>
        <template #default>
          <div @click="showDate = true">
            {{ timer }}<van-icon name="arrow" /></div
        ></template>
      </van-cell>
      <van-cell>
        <template #title>陪诊师 </template>
        <template #default>
          <div @click="showCompanion = true">
            {{ companion_name }}<van-icon name="arrow" /></div
        ></template>
      </van-cell>
      <van-cell>
        <template #title>接送地址 </template>
        <template #default>
          <div>
            <van-field
              class="text"
              input-align="right"
              v-model="from.receiveAddress"
              placeholder="请填写就诊人地址"
            />
          </div>
        </template>
      </van-cell>
      <van-cell>
        <template #title>联系电话 </template>
        <template #default
          ><div>
            <van-field
              class="text"
              input-align="right"
              v-model="from.tel"
              placeholder="请填写您的联系电话"
            />
          </div>
        </template>
      </van-cell>
    </van-cell-group>

    <van-cell-group title="服务需求" class="cell">
      <van-field
        class="text"
        style="height: 100px"
        v-model="from.demand"
        placeholder="请简单描述您要就诊的科室.."
      />
    </van-cell-group>

    <van-button @click="sumbit" class="sumbit" type="primary" size="large"
      >提交订单</van-button
    >

    <van-popup v-model:show="showHospital" position="bottom">
      <van-picker
        :columns="hospitalColumns"
        @confirm="hospitalOnConfirm"
        @cancel="showHospital = false"
      />
    </van-popup>
    <van-popup v-model:show="showCompanion" position="bottom">
      <van-picker
        :columns="companionColumns"
        @confirm="companionOnConfirm"
        @cancel="showCompanion = false"
      />
    </van-popup>

    <van-popup v-model:show="showDate" position="bottom">
      <van-date-picker
        @confirm="dateOnConfirm"
        @cancel="showDate = false"
        v-model="currentDate"
        :min-date="minDate"
        title="选择日期"
      />
    </van-popup>

    <van-dialog :show-confirm-button="false" v-model:show="showcode">
      <van-icon name="cross" @click="closeCode" class="close" />
      <div>微信支付</div>
      <van-image height="150" width="150" :src="code" />
      <div>请使用本人微信扫描二维码</div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted, computed } from "vue";
import QRCode from "qrcode";
import { useRouter, useRoute } from "vue-router";
import schedule from "../../components/schedule.vue";
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();

const createInfo = ref({});
const showHospital = ref(false);
const showCompanion = ref(false);
const showDate = ref(false);
const showcode = ref(false);
const code = ref();
const currentDate = ref();
const minDate = ref(new Date());
const from = reactive({});
const hospitalColumns = computed(() => {
  return createInfo.value?.hospitals?.map((item) => {
    return { text: item.name, value: item.id };
  });
});
const companionColumns = computed(() => {
  return createInfo.value?.companion?.map((item) => {
    return { text: item.name, value: item.id };
  });
});
const timer = computed(() => {
  return currentDate.value?.toString().replaceAll(",", "-") || "请选择就诊时间";
});
const companion_name = computed(() => {
  return (
    createInfo?.value?.companion?.find((item) => item.id === from.companion_id)
      ?.name || "请选择陪诊师"
  );
});
const getCreateInfo = async () => {
  const res = await proxy.$api.getCreateInfo();
  if (res) {
    console.log(res);
    createInfo.value = res;
    // 选择医院
    let id = route.query.id;
    let hospital = createInfo.value.hospitals.find((item) => item.id === +id);
    from.hospital_id = hospital.id;
    from.hospital_name = hospital.name;
  }
};
const goback = (item) => {
  router.go(-1);
};
const companionOnConfirm = (item) => {
  from.companion_id = item.selectedValues[0];
  showCompanion.value = false;
};
const hospitalOnConfirm = async (item) => {
  from.hospital_id = item.selectedValues[0];
  from.hospital_name = createInfo.value.hospitals.find(
    (item) => item.id === from.hospital_id
  ).name;
  showHospital.value = false;
};
const dateOnConfirm = async (item) => {
  let time = currentDate.value.toString().replaceAll(",", "");
  let date = new Date(time.replace(/(\d{4})(\d{2})(\d{2})/, "$1-$2-$3"));
  from.starttime = date.getTime();

  showDate.value = false;
};
const closeCode = async (item) => {
  showcode.value = false;
  router.push("/order");
};
const sumbit = async () => {
  let arr = [
    "companion_id",
    "demand",
    "hospital_id",
    "hospital_name",
    "receiveAddress",
    "starttime",
    "tel",
  ];
  for (const i of arr) {
    if (!from[i]) {
      showNotify({ message: "请把每一项都填写" });
      return;
    }
  }

  let res = await proxy.$api.createOrder(from);
  QRCode.toDataURL(res.wx_code).then((url) => {
    code.value = url;
    showcode.value = true;
  });
};
onMounted(() => {
  getCreateInfo();
});
</script>

<style lang="less" scoped>
.container {
  background-color: #f0f0f0;
  height: 100vh;
}
.header {
  padding: 10px 0;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  .header-left {
    float: left;
  }
}

.cell {
  width: 95%;
  margin: 5px auto;
  background-color: #fff;
  ::v-deep(.van-field__control) {
    color: var(--van-cell-value-color);
  }
}
.service-text {
  background: url()
    no-repeat center center;
  background-size: 20px;
}
.sumbit {
  position: absolute;
  bottom: 0;
}
::v-deep(.van-dialog__content) {
  text-align: center;
  padding: 20px;
  .close {
    position: absolute;
    left: 20px;
  }
}
</style>
